<script type="text/javascript" charset="utf-8" src="__PUBLIC__/admin/js/uploadify/jquery.uploadify.min.js" ></script>
<link rel="stylesheet" charset="utf-8" type="text/css" href="__PUBLIC__/admin/js/uploadify/uploadify.css"> 
<script type="text/javascript" charset="utf-8" src="__PUBLIC__/admin/js/upload.js" ></script>
<style>
	.kuan{ width: 100%; overflow: hidden; float: left; margin: 5px; }
	.bg{ background: none; border: none;}
	label{ font-size: 16px;}
.uploadify-button-text{ display: inline-flex; }
.uploadify-button-text button{ margin: -10px; }
.upviewer img{ height:90px; width: 120px; }
.upviewer ul{ margin:0px; padding:0px; }
.upviewer li{ margin:0px; padding:0px; position: relative; display:inline-block; width:120px; height:90px; background-position: center; background-size: contain; background-repeat: no-repeat; float: left; margin-right:10px; border:1px #ccc solid; background-color:#f0f0f0;}
.upviewer li a{ display:inline-block; position: absolute; bottom:0px; left:0px; text-align:center; width:100%; background-color:rgba(0,0,0,0.3); color:red; cursor: pointer; }
.upviewer li:hover a{ background-color:rgba(0,0,0,0.8);}
</style>

<div class="panel panel-default">
	  <div class="panel-heading">添加房型</div>
	  <div class="panel-body" style=" padding:0px 20%;">
	    
		<form action="{:U('Apt/addfangxing')}" method="post" id="add" onsubmit="return validation()">
			<input type="hidden" name="hid" value="{$id}" />
		<div class="kuan">
		    <div class="form-group" >		    	
		   		 <label for="listimg" ><span style="color: red;">*</span>房型图:<span style="color: red;">(只能有一张)</span></label> 				
		    	 <input type="file" class="form-control" id="upload" placeholder="房型图"> <br /> 
		    	  <input type="hidden" name="img"  id="img"> 
		    		<div id="view" class=" upviewer" ></div>		
		  	</div>
		</div>		
		<div class="kuan">
		  <div class="form-group">
		  	
		    <label for="tuijian"><span style="color: red;">*</span>标题:</label>	    	
		    <input type="text" class="form-control" id="tuijian"  name="tuijian"  placeholder="标题" style="width: 200px;"/>
		      
		  </div>  
		</div>
		
		
		
		   
		   <div class="kuan">
		  <div class="form-group">
		  	
		    <label for="jiage"><span style="color: red;">*</span>价格:</label>	    	
		    <input type="text" class="form-control" id="jiage"  name="jiage"  placeholder="价格" style="width: 200px;"/>
		      
		  </div>  
		</div>
		
		<div class="kuan">
		  <div class="form-group">
		  	
		    <label for="huxing"><span style="color: red;">*</span>户型:</label>	    	
		    <input type="text" class="form-control" id="huxing"  name="huxing"  placeholder="户型" style="width: 200px;"/>
		      
		  </div>  
		</div>
		
		<div class="kuan">
		  <div class="form-group">
		  	
		    <label for="mianji"><span style="color: red;">*</span>面积:</label>	    	
		    <input type="text" class="form-control" id="mianji"  name="mianji"  placeholder="面积" style="width: 200px;"/>
		      
		  </div>  
		</div>
		   
		   
		 
		
		 <div class="kuan">
		    <div class="form-group" >
		    	
		   		 <label for="pingjia" ><span style="color: red;">*</span>评价:</label> 				
		    	   <textarea  class="form-control" id="pingjia" name="pingjia"  style="width: 400px; height: 200px;" placeholder="评价" form="add"></textarea>
					
		  	</div>
		   </div>

		<div class="col-sm-4" style="padding: 30px 0px;">
		  <button type="submit" class="btn btn-primary">添加</button>
		  </div>
		</form>
		 </div>  
	  </div>
	
<script type="text/javascript">

	
$(function(){
	initDelFile();
	//多文件上传
	initUploadify({ ID:'upload',url:"{:U('Upload/upload')}",success:function(obj){ 
		if(obj.s){
			$('#view').append('<li><img src="'+obj.d+'"/><a d_path="'+obj.d+'">删除</a></li>');
			initDelFile();
		}else{
			alert(obj.m);
		}
	} });
});

function initDelFile(){
	$('#view li a').unbind('click').click(function(){
		if(!confirm('你确认删除吗?')) return false;
		var _this = $(this);
		var dpath = $(_this).attr('d_path');
		if(!dpath) return false;
		$.post('{:U('Upload/delfile')}',{filepath:dpath},function(obj){ 
			if(obj.s){ 
				$(_this).parents('li').remove();
			}else{
				alert(obj.m);
				$(_this).parents('li').remove();
			} 
		},'json');
	});
}


//验证	
	function validation(){
		var img=$('#view').html().trim();//获取值		
		var	listimg=$('#img').val(img);//写入值
		var listnum=document.getElementById("view").getElementsByTagName("img");//验证数量
		

		var tuijian=$('#tuijian').val();
		var jiage=$('#jiage').val();
		var huxing=$('#huxing').val();
		var mianji=$('#mianji').val();
		var pingjia=$('#pingjia').val();
		if(tuijian=="")
		{
			alert('请填写推荐');
			 return false; 
		}
		if(jiage=="")
		{
			alert('请填写价格');
			 return false; 
		}
		if(huxing=="")
		{
			alert('请填写户型');
			 return false; 
		}
		if(mianji=="")
		{
			alert('请填写价格');
			 return false; 
		}
		if(pingjia=="")
		{
			alert('请填写评价');
			 return false; 
		}
		if(img=="")
		{
			alert('请上传房型图');
			 return false; 
		}
		if(listnum.length>1)
		{
			alert('房型图不能超过一张，请删除多余的图片');
			 return false; 
		}
	
		 return true; 
	
	}


</script>